<template>
  <el-form class="wfc-union__new-form">
    <div class="wfc-union__box">
      <el-dropdown
        v-if="leftVariable"
        :disabled="isDisabled"
        style="width: 30px"
        type="primary"
        @command="handleCommand"
      >
        <span class="el-dropdown-selfdefine">
          {{ typeNameword }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in typeList"
            :key="item.value"
            :command="item.value"
          >
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="item" style="display: inline-block; width: calc(100% - 32px)">
        <template v-if="typeName === 'FIX'">
          <el-input
            v-if="componentType === 'input'"
            key="input"
            v-model="config.value[0]"
            style="width: 100%"
          >
          </el-input>
          <el-input-number
            v-if="componentType === 'number'"
            v-model="config.value[0]"
            key="number"
            controls-position="right"
            style="width: 100%"
          >
          </el-input-number>
          <el-input-number
            v-if="componentType === 'integer-number'"
            :precision="0"
            key="integer-number"
            v-model="config.value[0]"
            controls-position="right"
            style="width: 100%"
          >
          </el-input-number>
          <template v-if="componentType === 'number-range'">
            <el-input-number
              v-model="config.value[0]"
              controls-position="right"
              key="number-range-form"
              style="width: calc(50% - 10px); margin-right: 10px"
            >
            </el-input-number>
            <el-input-number
              v-model="config.value[1]"
              :min="config.value[0]"
              key="number-range-to"
              controls-position="right"
              style="width: 50%"
            >
            </el-input-number>
          </template>
          <template v-if="componentType === 'integer-number-range'">
            <el-input-number
              v-model="config.value[0]"
              :precision="0"
              key="integer-number-from"
              controls-position="right"
              style="width: calc(50% - 10px); margin-right: 10px"
            >
            </el-input-number>
            <el-input-number
              v-model="config.value[1]"
              :precision="0"
              key="integer-number-to"
              :min="config.value[0]"
              controls-position="right"
              style="width: 50%"
            >
            </el-input-number>
          </template>
          <!--        日期-->
          <div style="display: flex" v-if="componentType === 'date-pick'">
            <el-select
              :style="{
                width:
                  dateFields.includes(config.value[0]) ||
                  config.value[0] === 'CUSTOM'
                    ? '150px'
                    : '100%',
              }"
              v-model="config.value[0]"
              filterable
            >
              <el-option
                v-for="(value, key) in DateDeterminerEnum"
                :key="key"
                :value="key"
                :label="value"
              />
            </el-select>
            <el-input-number
              class="ml5"
              v-if="dateFields.includes(config.value[0])"
              :min="0"
              v-model="config.dateNum"
              controls-position="right"
              style="width: 90px"
            >
            </el-input-number>
            <el-select
              v-if="dateFields.includes(config.value[0])"
              v-model="config.timeUnit"
              style="width: 105px; margin-left: 5px"
              filterable
            >
              <el-option
                v-for="(value, key) in HcTimeUnitEnum"
                :key="key"
                :value="key"
                :label="value"
              />
            </el-select>
            <el-date-picker
              style="width: 190px; margin-left: 5px"
              v-if="config.value[0] === 'CUSTOM'"
              key="date-pick"
              v-model="config.customDate"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>

          <el-time-picker
            v-if="componentType === 'time-pick'"
            key="time-pick"
            style="width: 100%"
            v-model="config.value[0]"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="选择时间"
          >
          </el-time-picker>
          <el-date-picker
            v-if="componentType === 'date-range'"
            v-model="config.value"
            key="date-range"
            :clearable="false"
            style="width: 100%"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-time-picker
            style="width: 100%"
            key="time-range"
            v-if="componentType === 'time-range'"
            v-model="config.value"
            is-range
            :clearable="false"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>

          <el-select
            v-show="componentType === 'user-select'"
            key="user-select"
            v-model="config.value"
            multiple
            placeholder="请选择"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!--  部门-->
          <tree-select
            multiple
            filterable
            v-if="componentType === 'department-select'"
            width="100%"
            :filterNodeMethod="filterNodeMethod"
            v-model="config.value"
            :treeData="departmentOptions"
          />
          <template v-if="componentType !== 'time-range'">
            <!--          字典-->
            <el-select
              v-show="
                componentType === 'dict-select' &&
                (opType === 'similarTo' || opType === 'notSimilarTo')
              "
              style="width: 100%"
              multiple
              v-model="config.value"
            >
              <el-option
                v-for="item in dictOptions"
                :key="item.optionValue"
                :value="item.optionValue"
                :label="item.optionName"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 100%"
              v-show="
                componentType === 'dict-select' &&
                (opType === 'eq' || opType === 'ne')
              "
              v-model="config.value[0]"
            >
              <el-option
                v-for="item in dictOptions"
                :key="item.optionValue"
                :value="item.optionValue"
                :label="item.optionName"
              >
              </el-option>
            </el-select>
            <!--          关联选择-->
            <el-select
              v-show="
                componentType === 'model-select' &&
                (opType === 'similarTo' || opType === 'notSimilarTo')
              "
              style="width: 100%"
              multiple
              v-model="config.value"
            >
              <el-option
                v-for="item in relateModelData"
                :key="item.id"
                :value="item.id"
                :label="item.label"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 100%"
              v-show="
                componentType === 'model-select' &&
                (opType === 'eq' || opType === 'ne')
              "
              v-model="config.value[0]"
            >
              <el-option
                v-for="item in relateModelData"
                :key="item.id"
                :value="item.id"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </template>

          <!--          布尔-->
          <el-select
            style="width: 100%"
            v-if="componentType === 'boolean-select'"
            v-model="config.value[0]"
            key="boolean-select"
          >
            <el-option
              v-for="item in boolList"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <!--          占位-->
          <el-input
            v-if="!opType || !componentType"
            key="placeholder"
            disabled
            style="width: 100%"
            placeholder="请选择"
          >
          </el-input>
        </template>
        <el-select
          v-else-if="typeName === 'SYS_VAR'"
          style="width: 100%"
          key="sys-var"
          :disabled="!this.opType"
          v-model="config.value[0]"
        >
          <el-option
            v-for="item in engineVariableList"
            :key="item.value"
            :value="item.value"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-input
          v-else
          style="width: calc(100% + 30px)"
          disabled
          key="other"
          placeholder="请选择"
        >
        </el-input>
      </div>
    </div>
  </el-form>
</template>
<script>
import { filterNodeMethod } from "@/utils/treeSelectFormat";
import { getHmdictionaryPageList } from "@/apis/paas/HmDictionaryController.js";
import { postHmhttprequestdefinitionExecute } from "@/apis/paas/HmHttpRequestDefinitionController.js";
const systemVariableDefault = [
  {
    id: null,
    name: "当前登录用户",
    value: "isCurrentUser",
    result_type: "SHORT_TEXT",
    data_type: "SHORT_TEXT",
  },
  {
    id: null,
    name: "当前登录用户的部门",
    value: "isCurrentDepartment",
    result_type: "SHORT_TEXT",
    data_type: "SHORT_TEXT",
  },
];

const DateDeterminerEnum = {
  TODAY: "当天",
  THIS_WEEK: "本周",
  THIS_MONTH: "本月",
  THIS_YEAR: "本年",
  PAST: "过去",
  FUTURE: "未来",
  CUSTOM: "自定义",
};

const HcTimeUnitEnum = {
  YEAR: "年",
  MONTH: "月",
  DAY: "天",
  HOUR: "小时",
};
export default {
  name: "UnionSelect",
  components: {},
  props: {
    modelCode: {},
    modelVariableList: {},
    config: {}, // rightVariable_bo{
    //   "type": "system",
    //   "value": ["current_user_id"],
    //   "display_bos": []
    // },
    unionType: {},
    hasLeftType: {}, // 左值的字段类型
    customType: {}, // 左侧字段类型
    leftVariable: {}, // 左侧字段的value
    opType: {},
    isDisabled: {},
    isShowForm: {
      // 是否显示表单控件
      default: false,
    },
  },
  data() {
    return {
      systemVariableDefault,
      DateDeterminerEnum,
      HcTimeUnitEnum,
      filterNodeMethod,
      dateFields: ["PAST", "FUTURE"],
      componentType: "",
      everyDisabled: true,
      // private typeName = this.config
      typeName: "FIX", // 右侧的类型-- 固定值，系统变量。。。
      typeNameword: "", // 显示的类型名称
      isShowTootip: true,
      userValueIds: [],
      userOptions: [],
      departmentOptions: [],
      dictOptions: [],
      relateModelData: [],
      relateDictType: "",
      typeList: [
        {
          value: "SYS_VAR",
          label: "系统变量",
        },
        {
          value: "FIX",
          label: "固定值",
        },
      ],
      value2: "",
      numberObj: {
        leftNumber: "",
        rightNumber: "",
        leftOp: "(",
        rightOp: ")",
      },
      datetimeStr: "",
      engineVariableList: systemVariableDefault, // 系统变量list
      model: [],
      componetType: "",
      boolList: [
        {
          name: "TRUE",
          value: "TRUE",
        },
        {
          name: "FALSE",
          value: "FALSE",
        },
      ],
    };
  },
  computed: {},
  watch: {
    leftVariable: {
      handler() {
        this.componentType = "";
      },
      immediate: true,
    },
    opType: {
      handler: "opTypeChange",
      deep: true,
    },
    // 数据字段类型修改后 重新筛选表单控件options
    customType: {
      handler: "customTypeChange",
      immediate: true,
    },
    numberObj: {
      handler: "numberObjChange",
      deep: true,
    },
    hasLeftType: {
      handler: "hasLeftTypeChange",
    },
    typeName: {
      handler: "onTypeChange",
      immediate: true,
    },
    config: {
      handler: "watchConfig",
      immediate: true,
    },
    componentType: {
      handler: "watchComponentType",
      immediate: true,
    },
  },
  mounted() {
    this.typeName = this.config.type;
  },
  methods: {
    handleTypeList() {
      const obj = [
        {
          value: "SYS_VAR",
          label: "系统变量",
        },
        // {
        //   value: 'form',
        //   label: '表单控件',
        // },
        {
          value: "FIX",
          label: "固定值",
        },
      ];
      // 是否显示 表单控件
      // if (!this.isShowForm) {
      //   obj.splice(1, 1)
      // }
      // 这些类型只有固定值
      const arr = [
        "NUMBER",
        "INTEGER",
        "DATE",
        "TIME",
        "SEQ",
        "PICTURE",
        "ATTACHMENT",
        "RELATION_SELECT",
        "BOOL",
        "SUB_TABLE",
        "RELATION_PRIMARY_KEY",
      ];
      this.typeList = arr.includes(this.customType) ? obj.shift() && obj : obj;
      // 关联类型只有固定值
      if (this.customType === "relation") {
        this.typeList.shift();
      }
      if (this.customType === "STAFF" || this.customType === "DEPARTMENT") {
        this.typeList.pop();
      }
    },
    changeTypeName() {
      // 更改config的type类型
      // 清空config的每一项
      for (const key in this.config) {
        if (this.config.hasOwnProperty(key)) {
          this.config[key] = "";
        }
      }
      // 给type赋值
      this.config.type = this.typeName;
      this.$emit("changeValue", 1);
    },
    // 切换右值类型  --固定值，系统值
    handleCommand(data) {
      this.typeName = data;
      this.config.type = data;
      this.config.value = [];
    },
    getSimpleHandler() {
      let word = [];
      word = this.typeList.filter((item) => item.value === this.typeName);
      if (word.length > 0) {
        return word[0].label[0];
      } else {
        return "";
      }
    },
    // 监听右值的变化 --- 系统变量的变化
    changeConfigValue() {
      // 系统变量
      this.engineVariableList.map((item) => {
        if (item.value === this.config.value) {
          this.config.value[0] = item.value;
          this.config.name = item.name;
        }
        return item;
      });
    },
    watchEveryDisabled(newval) {
      this.everyDisabled = false;
      this.$nextTick(() => {
        this.everyDisabled = true;
      });
    },
    watchEngineVariableList(newval) {
      this.getDataComponentType(this.customType, this.opType);
    },
    // 运算符监听
    opTypeChange(newval) {
      if (this.customType === "DATE") {
        if (newval === "eq" || newval === "ne") {
          this.DateDeterminerEnum = {
            TODAY: "当天",
            THIS_WEEK: "本周",
            THIS_MONTH: "本月",
            THIS_YEAR: "本年",
            CUSTOM: "自定义",
          };
        } else {
          this.DateDeterminerEnum = {
            TODAY: "当天",
            THIS_WEEK: "本周",
            THIS_MONTH: "本月",
            THIS_YEAR: "本年",
            PAST: "过去",
            FUTURE: "未来",
            CUSTOM: "自定义",
          };
        }
      }
      this.getDataComponentType(this.customType, newval);
    },
    customTypeChange(newval, oldVal) {
      this.getDataComponentType(newval, this.opType);
      this.handleTypeList();
    },
    hasLeftTypeChange(newval) {
      this.typeName =
        this.unionType === "right" && this.hasLeftType ? "FIX" : this.typeName;
      this.config.type = this.typeName;
      if (this.hasLeftType === "DEPARTMENT" || this.hasLeftType === "STAFF") {
        // this.config.value = []
      }
    },
    onTypeChange(newval, oldVal) {
      this.typeNameword = this.getSimpleHandler();
    },
    watchConfig(config) {
      this.typeName = config.type;
    },

    // 根据数据字段类型获取右侧显示的组件类型
    getDataComponentType(type, opType) {
      if (!type) {
        return;
      }
      if (!opType || opType === "isNull" || opType === "isNotNull") {
        return;
      }
      const obj = {
        "SHORT_TEXT,LONG_TEXT,PICTURE,ATTACHMENT": [
          {
            arr: ["contains", "notContains", "eq", "ne"],
            type: "input",
          },
        ],
        // 数值
        NUMBER: [
          {
            type: "number",
            arr: [
              "ne", // 不等于
              "eq", // 等于
              "le", // <=
              "ge", // >=
              "lt", // <
              "gt", // >
            ],
          },
          {
            type: "number-range",
            arr: [
              "between", // 属于
              "notBetween", // 不属于
            ],
          },
        ],
        // 整型
        INTEGER: [
          {
            type: "integer-number",
            arr: [
              "ne", // 不等于
              "eq", // 等于
              "le", // <=
              "ge", // >=
              "lt", // <
              "gt", // >
            ],
          },
          {
            type: "integer-number-range",
            arr: ["between", "notBetween"],
          },
        ],

        DATE: [
          {
            type: "date-pick",
            arr: ["ne", "eq", "le", "ge", "lt", "gt"],
          },
        ],
        TIME: [
          {
            type: "time-range",
            arr: ["between", "notBetween"],
          },
          {
            type: "time-pick",
            arr: ["ne", "eq", "le", "ge", "lt", "gt"],
          },
        ],
        //  人员
        STAFF: [
          {
            type: "user-select",
            arr: ["ne", "eq"],
            systemFlag: ["isCurrentUser"],
          },
        ],
        // 部门
        DEPARTMENT: [
          {
            type: "department-select",
            arr: ["ne", "eq"],
            systemFlag: ["isCurrentDepartment"],
          },
        ],
        // SEQ: [
        //   {
        //     type: 'input',
        //     arr: ['like', 'notLike']
        //   }
        // ],
        BOOL: [{ type: "boolean-select", arr: ["ne", "eq"] }],
        RELATION_SELECT: [
          // {
          //   relateType: 'DICTIONARY',
          //   type: 'dict-select',
          //   arr: ['ne', 'eq', 'similarTo', 'notSimilarTo']
          // },
          // {
          //   relateType: 'BUSINESS',
          //   type: 'model-select',
          //   arr: ['ne', 'eq', 'similarTo', 'notSimilarTo']
          // }
        ],
      };
      Object.keys(obj).forEach((keys) => {
        if (keys.split(",").includes(type)) {
          // 当前类型下的分组
          if (type === "RELATION_SELECT") {
            const fieldList = this.modelVariableList.filter((item) => {
              return item.code === this.leftVariable;
            });
            const fieldItem = fieldList[0];
            const relateType = fieldItem?.relationType;
            if (relateType === "DICTIONARY") {
              this.componentType = "dict-select";
              this.getHmdictionaryPageList(JSON.parse(fieldItem.config).value);
            } else {
              this.componentType = "model-select";
              this.getRelateModelData(JSON.parse(fieldItem.config));
            }
            return;
          }
          const fieldArr = obj[keys];

          fieldArr.forEach((config) => {
            const ind = config.arr.findIndex((itemStr) => itemStr === opType);
            // 过滤系统字段
            if (~ind && config.systemFlag) {
              if (config.systemFlag) {
                this.engineVariableList = systemVariableDefault.filter((item) =>
                  config.systemFlag.includes(item.value)
                );
              }
            }
            if (~ind) {
              this.componentType = config.type;
              if (this.componentType === "time-range") {
                if (this.config.value?.length !== 2) {
                  this.config.value = ["", ""];
                }
              }
            }
          });
        }
      });
    },
    watchComponentType(val) {
      if (val === "user-select") {
        this.typeName = "SYS_VAR";
        this.config.type = "SYS_VAR";
      } else if (val === "department-select") {
        this.typeName = "SYS_VAR";
        this.config.type = "SYS_VAR";
      }
    },
    getHmdictionaryPageList(dictType) {
      if (!dictType) return;
      getHmdictionaryPageList({ pageSize: 100000, type: dictType }).then(
        (res) => {
          this.dictOptions = res.data;
        }
      );
    },
    getRelateModelData(config) {
      postHmhttprequestdefinitionExecute({
        key: "selectList",
        modelKey: this.modelCode,
        values: {
          _RELATION_TYPE_: "BUSINESS",
          value: config.value,
          modelCode: config.modelCode,
        },
      }).then((res) => {
        this.relateModelData = res;
      });
    },
  },
};
</script>
<style scoped>
.wfc-union__new {
  display: inline-block;
  margin-right: 10px;
}

.wfc-union__new .el-select .el-input__inner {
  padding-right: 28px;
}

.wfc-union__new .range-picker-date {
  width: 145px;
  vertical-align: top;
}

.wfc-union__new .range-picker-date .el-date-editor .el-range-input,
.wfc-union__new .range-picker-date .el-date-editor .el-range-separator {
  font-size: 12px;
}

.wfc-union__new .wfc-union__new-form {
  display: inline-block;
  width: 100%;
}

.wfc-union__new .wfc-union__box {
  width: 100%;
}

.wfc-union__new .wfc-union__box ::v-deep .el-input__icon {
  margin-right: 4px;
}

.wfc-union__new .width-full {
  width: 100%;
}

.wfc-union__new .select__width {
  width: calc(100% - 32px);
  vertical-align: top;
}

.wfc-union__new .select__width.el-select .el-input .el-input__inner {
  vertical-align: top;
}

.wfc-union__new .select__width input {
  vertical-align: top;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 12px;
}

.wfc-union__new .user__search {
  display: inline-block;
}

.wfc-union__new .el-date-editor--daterange.el-input__inner,
.wfc-union__new .el-date-editor.el-input {
  width: calc(100% - 32px);
}

.wfc-union__new .el-date-editor .el-input--suffix .el-input__inner {
  padding-right: 0;
}

.wfc-union__new .el-date-editor .el-range-separator {
  width: 14%;
  padding: 0;
}

.wfc-union__new .el-date-editor .el-range-input {
  width: 37.5%;
}

.wfc-union__new .el-date-editor .el-range__close-icon {
  display: none;
}

.wfc-union__new .select__width_half_left {
  width: calc(50% - 16px);
}

.wfc-union__new .select__width_half_left > .el-input__inner {
  padding-left: 38px;
  padding-right: 2px;
  border-radius: 0;
}

.wfc-union__new .select__width_half_left .el-input__prefix {
  left: 1px !important;
  right: inherit;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner {
  width: 36px;
  height: 30px;
  line-height: 30px;
  border: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner:focus,
.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner:hover {
  height: 32px;
  line-height: 32px;
  border: 1px solid #3c8cff;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__suffix {
  right: 0;
}

.wfc-union__new .select__width_half_right {
  width: calc(50% - 16px);
}

.wfc-union__new .select__width_half_right > .el-input__inner {
  padding-left: 5px;
  padding-right: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid transparent;
}

.wfc-union__new .select__width_half_right > .el-input__inner:focus,
.wfc-union__new .select__width_half_right > .el-input__inner:hover {
  border-left: 1px solid #3c8cff;
}

.wfc-union__new .select__width_half_right .el-input__suffix {
  right: 1px;
}

.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner {
  width: 36px;
  height: 30px;
  line-height: 30px;
  border: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner:focus,
.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner:hover {
  height: 32px;
  line-height: 32px;
  border: 1px solid #3c8cff;
}

.wfc-union__new .el-dropdown {
  height: 32px;
}

.wfc-union__new .wfc-union-dropdown {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  background: #f7f8fc;
  border: 1px solid #dee0e3;
  border-right: 0;
  text-align: center;
  outline: 0;
  vertical-align: top;
  border-radius: 2px 0 0 2px;
}

.wfc-union__new .activate {
  color: #3c8cff;
}

.wfc-union__new .disabled-input {
  height: 32px;
}

.wfc-union__new .wfc-union__new--select .el-input.el-input--suffix input {
  padding-left: 8px !important;
  color: #3c8cff !important;
  background-color: #f6f6f6;
  padding-right: 9px !important;
  border-right: 0;
  border-radius: 0 !important;
  font-family: PingFangSC !important;
  width: 32px;
}

.wfc-union__new .wfc-union__new--select .el-input__inner {
  border-color: #ccc !important;
}

.wfc-union__new .el-input-group__prepend {
  padding: 0 16px;
}

.wfc-union__new .type-select .el-input__suffix {
  display: none !important;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 12px;
  min-height: 48px;
  cursor: pointer;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-checkedStatusXRZJrules {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: -9px;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit:hover {
  background-color: #f5f7fa;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-headPortraitXRZJrules {
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-rightXRZJrules {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  padding: 7px 40px 7px 12px !important;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-bottomXRZJrules {
  min-height: 14px;
  line-height: 14px;
  font-size: 12px;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-nameXRZJrules {
  font-size: 14px;
  line-height: 14px;
  margin-right: 8px;
  word-wrap: break-word;
  word-break: break-word;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-emailXRZJrules {
  line-height: 12px;
  font-size: 12px;
  word-wrap: break-word;
  word-break: break-word;
}

.el-dropdown-selfdefine {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #f7f8fc;
  border: 1px solid #dee0e3;
  border-right: 0;
  text-align: center;
  outline: 0;
  border-radius: 2px 0 0 2px;
  color: #3c8cff;
  vertical-align: middle;
}

.line.first_line:before,
.line.last_line:before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 12px;
  height: 1px;
  background-color: #ccc;
  z-index: 100;
}

.reset_line .line.first_line:before,
.reset_line .line.last_line:before {
  left: -31px;
}

.delete-icon-blue {
  color: #3c8cff;
  cursor: pointer;
  line-height: 32px;
}

.wfc-pro-app-flow {
  font-size: 16px;
  font-style: normal;
}
</style>
